<template>
    <div>
        <el-carousel height="200px">
            <el-carousel-item v-for="item in adForm"  :key="item" style="width: 100%;height: 200px;">
                <img :src="item.thumbnail" width="100%" height="100%">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import { list } from "@/api/ad";
import { mapGetters } from "vuex";
import utils from "../../../../utils/utils.js";
export default {
    name: "swipersTranslate",
    data() {
        return {
            pageNum: 1,
            pageSize: 4,
            adForm: [
                { thumbnail: "http://cdn.rzico.com/img/shuffling_img.jpeg" },
                { thumbnail: "http://cdn.rzico.com/img/shuffling_img.jpeg" },
                { thumbnail: "http://cdn.rzico.com/img/shuffling_img.jpeg" },
                { thumbnail: "http://cdn.rzico.com/img/shuffling_img.jpeg" },
            ],
            tagIds: [],
        };
    },
    computed: {
        ...mapGetters(["mchId"]),
    },
    created() {
        this.loadAd();
    },
    props: ["content"],
    methods: {
        loadAd() {
            var _this = this;
            if (!utils.isNull(this.content.tagids)) {
                this.tagIds = this.content.tagids.split(",");
                for (var i = 0; i < _this.tagIds.length; i++) {
                    _this.tagIds[i] = parseInt(_this.tagIds[i]);
                }
            }
            _this.pageSize = _this.content.rows;
            let params = new URLSearchParams();
            params.append("pageNum", _this.pageNum);
            params.append("pageSize", _this.pageSize);
            params.append("mchId", this.mchId);
            for (var i = 0; i < _this.tagIds.length; i++) {
                params.append("tagIds", _this.tagIds[i]);
            }
            list(params)
                .then((response) => {
                    console.log(response);
                    if (!utils.isNull(response.data.data)) {
                        this.adForm = response.data.data;
                        _this.adForm.forEach(function (item) {
                          if (utils.isNull(item.thumbnail)){
                            item.thumbnail='http://cdnx.hulu.fj.cn/upload/20200629/rBD_P17oiuSAYl2RAAQj40EPdu8011.png'
                          }
                          item.thumbnail = utils.thumbnail(item.thumbnail,750,360)
                        })
                    }
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
    },
};
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
